<template>
  <div class="home">
    <!-- 顶部 -->
    <div class="home-top">
      <van-row>
        <van-col span="6">
          <van-image width="96" height="38" src="//img.yaofang.cn/mobile/logo.jpg?v=201901092320" />
        </van-col>
        <van-col span="14">
          <van-search placeholder="冬瓜荷叶茶" />
        </van-col>
        <van-col span="4">
          <van-button plain type="info" to="/about">登录</van-button>
        </van-col>
      </van-row>
      <div class="top-bottom">
        <ul>
          <li>重大疾病</li>
          <li>慢性疾病</li>
          <li>常见疾病</li>
          <li>健康商城</li>
          <li>慈善赠药</li>
        </ul>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="lbt">
     <van-swipe :autoplay="3000" :width="360" indicator-color="white">
        <van-swipe-item v-for="(item,index) in swipelist" :key="index">
          <van-image :src="item.swipe_image"></van-image>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 宫格 -->
     <div>
      <van-grid :column-num="4" icon-size="40px">
        <van-grid-item v-for="(item,index) in categories" :key="index" :icon="item.ico" :text="item.text" />
      </van-grid>
    </div>
    <!-- 通知 -->
    <div>
   <van-notice-bar  color="#1989fa" text="新冠状病毒肺炎症状:人感染新型冠状病毒后的症状严重程度取决于病毒的类型以及人体的免疫水平，常见的有发热、咳嗽、呼吸急促或呼吸困难，更严重时会导致急性呼吸窘迫综合征、脓毒性休克等，可导致患者死亡。" left-icon="volume-o" />
    </div>
    <!-- 好货推荐 -->
    <div class="hhtj">
      <div class="title">
        <van-icon name="hot-o" color="#a54ff5" size="20"/>
        <span class="span">好货推荐</span>
        </div>
      <van-list>
        <van-cell v-for="item in list" :key="item" :title="item" />
        <van-grid :column-num="2" :border="true">
          <van-grid-item v-for="(item,index) in goodsList" :key="index" :text="item.goods_name" @click="toXQ(item.id)">
            <van-image :src="item.list_image" width="115" height="96"></van-image>
           <div class="goodslist_text">
              {{item.list_text}}
           </div>
            <span style="color:red" class="goodslist_span">{{item.list_qian}}</span>
          </van-grid-item>
        </van-grid>
      </van-list>
    </div>
    <!-- 标签 -->
    <div>
     <van-tabbar>
       <van-tabbar-item icon="home-o">首页</van-tabbar-item>
       <van-tabbar-item icon="apps-o" to="/classify">分类</van-tabbar-item>
       <van-tabbar-item icon="shopping-cart-o" to="/goshop">购物车</van-tabbar-item>
       <van-tabbar-item icon="user-o" to="/me">我</van-tabbar-item>
     </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      swipelist: [],
      categories: [],
      list: [],
      goodsList: []
    }
  },
  created () {
    // 轮播图
    this.$http.get('/lbtswipe').then(res => {
      // console.log(res)
      this.swipelist = res.data.data
    })
    // 分类
    this.$http.get('/goods_fenlei').then(res => {
      // console.log(res)
      this.categories = res.data.data
    })
    // 好货推荐列表
    this.$http.get('/list_goods').then(res => {
      // console.log(res)
      this.goodsList = res.data.data
    })
  },
  methods: {
    toXQ () {
      this.$router.push('/gmlkl')
    }
  }
}
</script>

<style scoped>
.van-search {
  margin-top: -5px;
}
ul li {
  float: left;
  width: 20%;
  font-size: 14px;
}
.lbt{
  margin-top: 30px;
}
.title{
  font-size: 12px;
}
.span{
    position: relative;
    top: -5px;
    left: 5px;
    color: #a54ff5;
}
.goodslist_text{
  font-size: 12px;
}
.goodslist_span{
  margin-left: -70px;
}
.van-list{
  margin-bottom: 50px;
}
</style>
